<template>
	<view class="body">
		<view class="box">
			<text class="text">登录</text>
			<view class="user">
				<uv-input 
					placeholder="请输入账号" 
					border="bottom" 
					fontSize="30rpx"
					v-model="username"
				></uv-input>
			</view>
			<view class="psw">
				<uv-input 
					placeholder="请输入密码" 
					border="bottom" 
					fontSize="30rpx"
					:password="true"
					v-model="password"
				></uv-input>
			</view>
			<view class="btn" style="padding: 20px;">
				<uv-button
				type="primary" 
				text="确定"
				color="#0bcb75"
				@click="handleLogin"
				></uv-button>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import { postLogin } from '@/api/weappUser'
import UvAlert from '@/uni_modules/uv-alert/components/uv-alert/uv-alert.vue';

const username = ref('')
const password = ref('')

const handleLogin = async () => {
  try {
    const res = await postLogin({ username: username.value, password: password.value });
    console.log("接口返回数据：", res);
    if (res.code === 200) {
      console.log("登录成功！");
      // 存储用户id到Storage
      uni.setStorageSync('userId', res.data.id);
      uni.switchTab({
      	url:'/pages/home/home'
      });
    }
  } catch (error) {
    console.error("接口请求失败：", error); 
  }
}
</script>

<style scoped lang="scss">
.body{
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	.box{
		width: 500rpx;
		height: 600rpx;
		border-radius: 20rpx;
		border: 1px solid #0bcb75;
		box-shadow: 0rpx 0rpx 10rpx5 rpx rgba(11, 203, 117, 0.5);
		display: flex;
		flex-direction: column;
		align-items: center;
		.text{
			font-size: 40rpx;
			font-weight: 600;
			margin: 30rpx 0;
		}
		.user{
			width: 400rpx;
			height: 50rpx;
			margin: 30rpx 0;
		}
		.psw{
			width: 400rpx;
			height: 50rpx;
			margin-top: 30rpx;
			margin-bottom: 60rpx;
		}
		.btn{
			width: 300rpx;
		}
	}
}
</style>